import React, { Component } from "react";
import axios from "axios";
import "./VideoDetail.css";

export default class VideoDetail extends Component {
    state = {
        //声明状态 保存视频数据
        info: {},
    };

    render() {
        //结构赋值
        let {desc, video_local} = this.state.info;
        return (
            <div className="container">
                <h3>{desc}</h3>
                <hr />
                <div className="video-container">
                    <video
                        height="100%"
                        controls
                        src={video_local ? ("http://cdn.xiaohigh.com" + video_local) : ''}
                    ></video>
                </div>
            </div>
        );
    }

    async componentDidMount() {
        //发送请求获取单个的视频信息
        let result = await axios.get("http://api.xiaohigh.com/douyin/10");
        //查看结果
        // console.log(result);
        //保存状态
        this.setState({
            info: result.data
        })
    }
}
